London | 26-ITP-May | Bisrat Tesfay | Sprint 1 | Form controls#1271
London | 26-ITP-May | Bisrat Tesfay | Sprint 1 | Form controls#1271B3-Bisrat wants to merge 2 commits into
Conversation
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
| <select name="color" id="color"> | ||
| <option value="white">White</option> | ||
| <option value="black">Black</option> | ||
| <option value="blue">Burgundy</option> | ||
| </select> | ||
| </div> | ||
| <div> | ||
| <p>Choose a size:</p> | ||
| <label> | ||
| <INPUT type="radio" id="xs" name="size" value="XS" required> | ||
| XS | ||
| </label> | ||
| <LABel> | ||
| <INPUT type="radio" id="s" name="size" value="S"> | ||
| S | ||
| </LABel> | ||
| <label> | ||
| <INPUT type="radio" id="m" name="size" value="M"> | ||
| M | ||
| </label> | ||
| <label> | ||
| <INPUT type="radio" id="l" name="size" value="L"> | ||
| L | ||
| </label> | ||
| <label> | ||
| <INPUT type="radio" id="xl" name="size" value="XL"> | ||
| XL | ||
| </label> | ||
| <label> | ||
| <INPUT type="radio" id="xxl" name="size" value="XXL"> | ||
| XXL |
There was a problem hiding this comment.
A note on the input types. I would use radio buttons for the colors and a drop down for the t shirt sizes. Radio buttons require more space so often it is better to use radio buttons if there are not to many options. (Just fyi. You don't need to change it)
There was a problem hiding this comment.
Thank you for the feedback and explanation. That makes sense, especially about using radio buttons when there are fewer options. I’ll keep that in mind for future forms and projects.
| <div> | ||
| <p>Choose a size:</p> | ||
| <label> | ||
| <INPUT type="radio" id="xs" name="size" value="XS" required> |
There was a problem hiding this comment.
Good catch, I didn’t notice that. I’ll change it to lowercase for consistency and better formatting. Thank you for pointing it out.
| <INPUT type="radio" id="xs" name="size" value="XS" required> | ||
| XS | ||
| </label> | ||
| <LABel> |
There was a problem hiding this comment.
The casing looks strange to me. How can you ensure consistent formatting in your code automatically?
There was a problem hiding this comment.
Thank you for the feedback. I think using a formatter like Prettier in VS Code would help keep my HTML formatting and casing consistent automatically. I’ll start using that moving forward. I also wanted to practice writing and formatting the code manually first so I could become more familiar with the syntax and remember it better.
There was a problem hiding this comment.
Yes Prettier is a great tool for formatting the code automatically. You can make it a habbit to run it before committing the code (and at some point configure it to run automatically when you save a file)
There was a problem hiding this comment.
Thank you, that’s really helpful advice.
Luro91
left a comment
There was a problem hiding this comment.
Well done the code works as expected and is nicely formatted now

Learners, PR Template
Self checklist
Changelist
Created a T-shirt order form using only HTML and CSS. Added semantic form elements, validation for required fields and email input, color and size selection options, and styled the page with CSS for a cleaner and more professional layout.
Questions
No questions at the moment.